﻿@{
    ViewBag.Title = "Register";
    Layout = "~/Views/Shared/_Main.cshtml";
}
@section head{
    <link rel="Stylesheet" type="text/css" href="/Content/css/bootstrap-datetimepicker.min.css" />
}
<div class="content">
    <div class="container">
        <div class="register">
            <div class="row">
                <div class="span12">
                    <div class="lrform" style="max-width: 600px;">
                        <h5>
                            新用户注册</h5>
                        <div class="form">
                            <!-- Register form (not working)-->
                            <form id="regform" action="/account/register" method="post" class="form-horizontal">
                            <input type="hidden" name="token" />
                            <div class="control-group">
                                <label class="control-label">
                                    账 号(*)</label>
                                <div class="controls">
                                    <input type="text" class="{required:true,email:true,remote:{url:'/account/usernameonly',messages:'该用户已存在'}}"
                                        id="txtusername" name="UserName" placeholder="请输入您的常用邮箱作为您的登录帐号" />
                                    <span class="help-block" style="color: Gray">例：example@gmail.com</span>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    真实姓名(*)</label>
                                <div class="controls">
                                    <input type="text" class="span4 {required:true}" id="txtnickname" name="NickName"
                                        placeholder="请输入真实姓名" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    性别</label>
                                <div class="controls">
                                    <label class="radio">
                                      <input type="radio" name="Gender" id="txtmale" value="1" checked="checked">
                                      先生
                                    </label>
                                    <label class="radio">
                                      <input type="radio" name="Gender" id="txtfemale" value="0">
                                      女士
                                    </label>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    密 码(*)</label>
                                <div class="controls">
                                    <input type="password" class="span4 {required:true,minlength:6,maxlength:18}" id="txtpassword"
                                        name="Password" placeholder="请输入您的密码" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    确认密码(*)</label>
                                <div class="controls">
                                    <input type="password" class="span4 {required:true,equalTo:'#txtpassword'}" id="txtconfrim"
                                        name="Confirm" placeholder="请再次输入密码" />
                                </div>
                            </div>
                         @*   <div class="control-group">
                                <label class="control-label">
                                    所在地区</label>
                                <div class="controls">
                                    <select id="txtAreaCode" name="AreaCode"></select> -- <select id="txtLocation" name="Location"></select>
                                </div>
                            </div>*@
                            <div class="control-group">
                                <label class="control-label">
                                    联系电话(*)</label>
                                <div class="controls">
                                    <input type="text" class="span4 {required:true,digits:true}" id="txtphone"
                                        name="Phone" placeholder="请输入联系电话" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    QQ(*)</label>
                                <div class="controls">
                                    <input type="text" class="span4 {required:true,digits:true}" id="txtQQ"
                                        name="QQ" placeholder="请输入常用QQ" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    生日(*)</label>
                                <div class="controls">
                                <div id="datetimepicker" class="input-append">
                                    <input id="txtBirthday" data-format="yyyy-MM-dd" type="text" name="Birthday" class="{required:true,dateISO:true}" />
                                    <span class="add-on"><i class="icon-calendar" data-time-icon="icon-time" data-date-icon="icon-calendar">
                                    </i></span>
                                </div>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    验 证(*)</label>
                                <div class="controls">
                                    <div class="span3" style="margin-left: 0px;">
                                        <input type="text" id="txtvaildcode" name="validcode" class="pull-left {required:true,minlength:4,maxlength:4}"
                                            placeholder="请输入右侧验证码" />
                                    </div>
                                    <div id="codeimg" style="margin-left: 10px;">
                                    </div>
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                    <label class="checkbox">
                                        <input type="checkbox" id="cbk" name="accept" checked="checked" class="{required:true}" />
                                        <a target="_blank" href="/home/agreement">我已阅读并接受《使用协议》</a>
                                    </label>
                                </div>
                            </div>
                            <!-- Buttons -->
                            <div class="form-actions">
                                <!-- Buttons -->
                                <button type="submit" class="btn btn-primary">
                                    提交</button>
                                <button type="reset" class="btn">
                                    重填</button>
                            </div>
                            </form>
                            已经有账户? | <a href="/account/login">立刻登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="border">
        </div>
        @Html.Partial("~/views/shared/partial/_article.cshtml")
    </div>
</div>
@section tail
{
    <script type="text/javascript" src="/Scripts/plug.js"></script>
    <script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.validate.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.metadata.js"></script>
    <script type="text/javascript">
        var validation = new plug.BindValidCode();
        $(function () {
            $('#datetimepicker').datetimepicker({
                pickTime: false
            });
            validation.BindValidator();
            $('#regform').validate({
                errorClass: "help-inline",
                errorElement: "span",
                highlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').addClass('error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').removeClass('error');
                }
            });
            @*new plug.Control().BuildRelationSelect('txtAreaCode', 'txtLocation', 'province');*@
        });
        function Refalsh(sender) {
            validation.Refalsh(sender);
        }
    </script>
}
